<template>
<div class="container-addManagement">
  <el-form ref="informationForm" :model="informationForm" label-width="80px" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="informationForm.username"></el-input>
  </el-form-item>
  <el-form-item label="姓名" prop="realname">
    <el-input v-model="informationForm.realname"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="informationForm.password"></el-input>
  </el-form-item>
  <el-form-item label="手机" prop="phone">
    <el-input v-model="informationForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="状态" prop="status">
    <!-- <el-input v-model="informationForm.status"></el-input> -->
    <el-select v-model="informationForm.status" placeholder="请选择状态">
    <el-option
      v-for="item in StatusList"
      :key="item.value"
      :label="item.name"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="权限" prop="auth">
    <el-select v-model="informationForm.auth" placeholder="请选择权限">
    <el-option
      v-for="item in authList"
      :key="item.value"
      :label="item.name"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="公司名称" prop="clientId">
    <!-- <el-input v-model="informationForm.clientName"></el-input> -->
    <el-select v-model="informationForm.clientId" placeholder="请选择公司">
    <el-option
      v-for="item in companyList"
      :key="item.value"
      :label="item.name"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="上传头像">
    <upload-image @updateImageUrl="getImageUrl"></upload-image>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button @click="resetInformation">重置</el-button>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
import { encrypt } from '../../../utils/crypto'
export default {
  components: { uploadImage: () => import('../../../components/uploadImage.vue') },
  data () {
    const checkUsername = (rule, value, callback) => {
      if (!/^[a-zA-Z0-9_-]{4,10}$/.test(value)) {
        return callback(new Error('用户名为4-10位字母数字或者下划线'))
      }
      callback()
    }
    const checkRealname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('姓名能为空'))
      }
      callback()
    }
    const checkPassword = (rule, value, callback) => {
      if (!/^[a-zA-Z0-9]{5,8}$/.test(value)) {
        return callback(new Error('密码为5-8位数字或者字母'))
      }
      callback()
    }
    const checkPhone = (rule, value, callback) => {
      if (!/^(13[0-9]|14[5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|16[5|6]|17[1-8]|18[0-9]|19[1|9])\d{8}$/.test(value)) {
        return callback(new Error('请输入正确的手机号码'))
      }
      callback()
    }
    const checkClientId = (rule, value, callback) => {
      if (!value) {
        callback(new Error('公司不能为空'))
      }
      callback()
    }
    const CheckStatus = (rule, value, callback) => {
      if (value !== '0' && value !== '1' && value !== 0 && value !== 1) {
        callback(new Error('状态为0或者1，0为未激活，1为激活'))
      }
      callback()
    }
    const CheckAuth = (rule, value, callback) => {
      if (value !== '2' && value !== '1' && value !== 2 && value !== 1) {
        callback(new Error('用户权限为1或者2, 1为平台管理员, 2为公司管理员'))
      }
      callback()
    }
    return {
      informationForm: {
        id: null,
        clientId: '',
        clientName: '',
        username: '',
        realname: '',
        password: '',
        phone: null,
        status: null,
        auth: null,
        img: ''
      },
      companyList: [],
      StatusList: [
        { name: '激活', value: 1 },
        { name: '未激活', value: 0 }
      ],
      authList: [
        { name: '管理员', value: 1 },
        { name: '操作员', value: 2 }
      ],
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: checkUsername, trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { validator: checkRealname, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        clientId: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          { validator: checkClientId, trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
          { validator: CheckStatus, trigger: 'blur' }
        ],
        auth: [
          { required: true, message: '权限设置', trigger: 'blur' },
          { validator: CheckAuth, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getCompanyList()
  },
  methods: {
    async getCompanyList () {
      const res = await this.$http.get('/api/platApi/client/dropDown')
      if (res.status === 200 && res.data.code === 1) {
        this.companyList = res.data.data
      }
    },
    onSubmit () {
      this.$refs.informationForm.validate(async valid => {
        if (valid) {
          this.informationForm.password = encrypt(this.informationForm.password)
          const res = await this.$http.post('/api/platApi/user/add', this.informationForm)
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              message: '添加用户成功',
              type: 'success'
            })
            this.$emit('closeDialog')
            this.$refs.informationForm.resetFields()
          } else if (res.status === 200 && res.data.code === 500) {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
            this.$refs.informationForm.resetFields()
          } else {
            this.$message.error('添加用户失败')
          }
        } else {
          return false
        }
      })
    },
    resetInformation () {
      this.$refs.informationForm.resetFields()
    },
    getImageUrl (val) {
      this.informationForm.img = val
    }
  }
}
</script>

<style scoped lang="less">
.el-form{
    margin: 0 6%;
    .el-button{
      margin-left: 10%;
    }
}
</style>
